<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Custom Cursor Example</title>
    <style>
        body {
            cursor: none;
            /* 隐藏默认光标 */
        }

        #cursor {
            position: absolute;
            pointer-events: none;
            /* 允许点击透过元素 */
            opacity: 0.7;
            /* 设置透明度 */
        }
    </style>
</head>

<body>
    <div id="cursor">😊</div>

    <script>
        // 获取用于显示自定义光标的元素
        var cursor = document.getElementById('cursor');

        // 监听鼠标移动事件
        document.addEventListener('mousemove', function (event) {
            // 更新自定义光标的位置
            cursor.style.top = event.clientY + 'px';
            cursor.style.left = event.clientX + 'px';
        });
    </script>
</body>

</html>